<template>
  <img :src="imgUrl" alt="" :width="width" :height="height">
</template>

<script lang="ts" setup>
import { computed } from 'vue';

  const props = defineProps({
    width: {
      default: '100px',
      type: String,
    },
    height: {
      default: '100px',
      type: String,
    },
    alt: {
      default: '',
      type: String
    },
    active: {
      default: false,
      type: Boolean
    },
    src: {
      default: '',
      type: String
    }
  })

  const imgUrl = computed(() => {
    const isActive = props.active ? '-active' : ''
    return new URL(`./images/${props.src}${isActive}.png`, import.meta.url).href
  })
</script>

<style lang="scss" scoped>

</style>